<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700"
    :destroy-on-close="true">
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt="" />
            {{ type == 'CREATE' ? '新建' : '编辑' }}图标
          </div>
          <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
            @click="drawer = false" />
        </div>
      </div>
      <div class="content-box">
        <div class="label">名称:</div>
        <div class="desc">
          <el-input type="text" placeholder="请输入名称" v-model="form.Name"></el-input>
        </div>
      </div>
      <div class="content-box">
        <div class="label">展示地址:</div>
        <div class="desc">
          <el-select v-model="form.optFor" placeholder="请选择">
            <el-option v-for="item in dictionariesData" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="content-box">
        <div class="label">排序:</div>
        <div class="desc">
          <el-input type="text" placeholder="金刚图排列顺序" v-model="form.Sort"></el-input>
        </div>
      </div>
      <div class="content-box">
        <div class="label">图标:</div>
        <div class="desc">
          <div class="tips">图标可上传1张图片，图片不超过512KB，仅支持jpg、png格式</div>
          <imgUplode :list="fileList" @imgList="getImgsUrl" :octopus="octopus" num="1">
          </imgUplode>
        </div>
      </div>
      <div class="content-box">
        <div class="label">Code:</div>
        <div class="desc">
          <el-input type="text" placeholder="请输入Code" v-model="form.Code"></el-input>
        </div>
      </div>
      <div class="content-box">
        <div class="label">跳转地址:</div>
        <div class="desc">
          <el-input type="text" placeholder="请输入小程序页面地址" v-model="form.IconUrl"></el-input>
        </div>
      </div>
      <div class="content-box">
        <div class="label">是否展示</div>
        <div class="desc">
          <el-radio v-model="form.IsShow" :label="1">是</el-radio>
          <el-radio v-model="form.IsShow" :label="0">否</el-radio>
        </div>
      </div>
      <div>
        <div class="button_list">
          <button @click="save">保存</button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import imgUplode from '@/components/Components/imgUpdate.vue'
export default {
  name: "cat_dialog",
  props: {
    messageList: {
      type: Object,
      default: {},
    },
  },
  components: {
    imgUplode,
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      type: 'UPDATE',
      dictionariesData: [],

      form: {
        optFor: '',
        Name: "",
        IconPicturePath: [],
        IconUrl: "",
        IsShow: 0,
        ID: null,
        Code: "",
        Sort: ''
      },
      rules: {
        Name: { required: true, message: "请输入名称" },
        IconPicturePath: { required: true, message: "请选择图标" },
        Code: { required: true, message: "请输入Code" },
        IconUrl: { required: true, message: "请输入跳转地址" },
      }
    };
  },
  computed: {
    fileList() {
      try { return JSON.parse(this.messageList.IconPicturePath) } catch (e) { return [] }
    }
  },
  watch: {
    drawer: {
      handler(v) {
        this.dictionaries()
        if (v && Object.keys(this.messageList).length) {
          this.form.Name = this.messageList.Name
          this.form.IconUrl = this.messageList.IconUrl
          this.form.IsShow = this.messageList.IsShow
          this.form.ID = this.messageList.ID;
          this.form.Code = this.messageList.Code;
          this.form.Sort = this.messageList.Sort;
          this.form.optFor = this.messageList.TableID
          try {
            this.form.IconPicturePath = JSON.parse(this.messageList.IconPicturePath)
          } catch (e) { }
        } else {
          this.form = {
            Name: "",
            IconPicturePath: [],
            IconUrl: "",
            IsShow: 0,
            ID: null,
            Code: "",
            Sort: "",
            optFor: '',
          }
        }
      }
    }
  },
  methods: {
    dictionaries() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1412,
          cellData: [
            { name: "ID" },	// ID
            { name: "Name" },	// Name
            { name: "ParentkeyValue" },	// ParentkeyValue
          ],
        },
        (data) => {
          if (data.status.code == 200) {
            this.dictionariesData = data.content.queryData
          } else {
            this.octopus.tips.error(data);
          }
        })
    },
    save() {
      if (!this.octopus.tools.verify(this.form, this.rules)) {
        return
      }
      this.$confirm(`确定${this.type == 'CREATE' ? '新建' : '保存'}这个图标吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(res => {
        this.updateFunctionalZone();
      }).catch(() => {
        console.log('取消了');
      })
    },
    getImgsUrl(fileList) {
      this.$set(this.form.IconPicturePath, 0, fileList[0])
    },
    drawerOp(type) {
      this.type = type;
      this.drawer = true;
    },
    updateFunctionalZone() {
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1309,
          type: this.type,
          value: this.type == 'CREATE' ? '' : this.form.ID,
          cellData: [
            { name: "TableID", defaultValue: this.form.optFor },	// TableID
            { name: "Name", defaultValue: this.form.Name },	// 名称
            { name: "Sort", defaultValue: this.form.Sort },	// 排序
            { name: "IconPicturePath", defaultValue: JSON.stringify(this.form.IconPicturePath) },	// 图片
            { name: "Code", defaultValue: this.form.Code },	// 名称
            { name: "IconUrl", defaultValue: this.form.IconUrl },	// 跳转地址
            { name: "IsShow", defaultValue: this.form.IsShow },	// 是否展示
            { name: "CreateUserID", defaultValue: this.octopus.passport.id },	// 创建人
            { name: "CreateTime", defaultValue: this.type == 'CREATE' ? new Date().toJSON().substring(0, 10) + " " + new Date().toTimeString().substring(0, 8) : this.messageList.CreateTime },	// 创建时间
          ],
          paramData: {}
        },
        (data) => {
          if (data.status.code == 200) {
            this.drawer = false;
            this.octopus.tips.success('操作成功。')
            this.$emit('reload')
          } else {
            this.octopus.tips.error(data);
          }
        });
    },
  },
};
</script>
<style scoped>
.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #F78C53;
  cursor: pointer;
}

.tips {
  margin-bottom: 20px;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
  font-size: 1.6rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: flex-start;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 10rem;
}

.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
  padding-left: 2px;
}

>>>.el-radio__input.is-checked+.el-radio__label {
  color: #F87338;
}

>>>.el-radio__input.is-checked .el-radio__inner {
  border-color: #F87338;
  background: #F87338;
}
</style>